<blockquote class="layui-elem-quote" style="background: #fff;">
	说明：为角色授权菜单资源权限。
</blockquote>
<div class="layui-row layui-col-space15" style="height: 100%;">
	<div class="layui-col-md4"  style="height: 100%;">
		<div class="layui-card" style="height: 100%;">
			<div class="layui-card-header">
		        <h2 class="header-title">角色列表</h2>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-table" id="role-table" lay-filter="role-table"></table>
		    </div>
		</div>
	</div>
	<div class="layui-col-md8">
		<div class="layui-card">
	    	<div class="layui-card-header">
		        <h2 class="header-title">权限列表</h2>
		        <div class="layui-btn-group" style="float: right">
		            <button class="layui-btn layui-btn-sm" id="btnAuthorizeAuth"><i class="layui-icon">&#xe672;</i> 确认授权</button>
		        </div>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-hidden" id="auth-table" lay-filter="auth-table"></table>
		    </div>
		</div>
	</div>
</div>

<!-- 权限类型列 -->
<script type="text/html" id="authTypeTpl">
    {{#  if(d.authType === 'MODULE'){ }}
        <span class="layui-badge layui-bg-black">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'MENU'){ }}
        <span class="layui-badge layui-bg-blue">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'URL'){ }}
        <span class="layui-badge-rim">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'BUTTON'){ }}
        <span class="layui-badge layui-bg-gray">{{ d.authTypeText }}</span>
    {{#  } }}
</script>

<script th:inline="javascript">
/*<![CDATA[*/
    layui.use(['jquery', 'table', 'treeGrid'], function () {
        var $ = layui.$;
        var table = layui.table;
        var treeGrid = layui.treeGrid;
        var form = layui.form;

        // 渲染角色表格
        table.render({
            elem: '#role-table',
            url: 'system/role/pageList',
            skin: 'line',
            page: true,
            cols: [
                [
                	{type: 'radio'},
                    {type: 'numbers', title: '序号'},
                    {field: 'roleName', sort: true, title: '角色名称'},
                    {field: 'roleTypeText', width: 100, align: 'center', title: '角色类型'}
                ]
            ]
        });
        
        // 监听角色选中事件
        table.on('radio(role-table)', function(obj){
       		treeGrid.reload('auth-table', {
	            where: {
	            	rolePid: obj.data.pid
	            }
	        });
       	});

		// 渲染权限资源表格
		treeGrid.render({
            id: 'auth-table'
            ,elem: '#auth-table'
            //,data: data
            ,url: '/system/roleauth/getRoleAuthsAll'
            ,cellMinWidth: 100
            ,idField: 'id'//必須字段
            ,treeId: 'id'//树形id字段名称
            ,treeUpId: 'pId'//树形父id字段名称
            ,treeShowName: 'name'//以树形式显示的字段
            ,height:'80%'
            ,isFilter: false
            ,iconOpen: true//是否显示图标【默认显示】
            ,isOpenDefault: false//节点默认是展开还是折叠【默认展开】
            ,loading: true
            ,method: 'post'
            ,isPage: false
            ,cols: [
            	[
	                {type:'checkbox',sort:true},
	            	{type: 'numbers', title: '序号'},
	                {field: 'name', width: 250, title: '显示名称'},
	                {field: 'directUrl', width: 200, title: '资源地址'},
	                {field: 'authPerms', width: 200, title: '权限标识'},
	                {field: 'authTypeText', width: 100, title: '权限类型', templet: '#authTypeTpl'},
	                {field: 'sortOrder', title: '显示排序'}
            	]
            ]
            ,parseData:function (res) {//数据加载后回调
                return res;
            }
            ,onClickRow:function (index, o) {
                console.log(index,o,"单击！");
            }
            ,onDblClickRow:function (index, o) {
                console.log(index,o,"双击");
            }
        });
		
		// 添加按钮确认授权点击事件
        $('#btnAuthorizeAuth').click(function () {
            var selectRoleRow = table.checkStatus('role-table');
            if (selectRoleRow.data.length == 0) {
            	layer.msg("请选择要授权的角色");
            	return;
            }
            var checkStatus = treeGrid.checkStatus('auth-table'),data = checkStatus.data;
            if (data.length == 0) {
            	layer.msg("请选择要授权的权限");
            	return;
            }
            var roleAuthIdArr = [];
            for (var i=0; i< data.length; i++) {
            	roleAuthIdArr.push(data[i].id);
            }
            
            var data = {roleid: selectRoleRow.data[0].pid, authids: roleAuthIdArr.join(",")};
            $.post("/system/role/saveperms", data, function (result) {
                layer.closeAll('loading');
                layer.msg(result.msg);
            });
        });
	});
/*]]>*/
</script>